<template>
    <div>
        <TopNav :obj="obj"></TopNav>
        <div class="form_box">
            <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="标签">
                    <el-input v-model="ruleForm.tag"></el-input>
                </el-form-item>
                <el-form-item label="访问权限">
                    <el-input v-model="ruleForm.authority"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="ruleForm.online">
                        <el-option label="未使用" :value="false"></el-option>
                        <el-option label="使用中" :value="true"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add">确认</el-button>
                    <el-button @click="reset">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts">
import TopNav from '@/components/TopNav.vue';
import { $AddKeyFn, $KeyDetail, $EidtKeyFn } from '@/api'
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
export default defineComponent({
    name: 'AddKey',
    components: { TopNav },
    setup() {
        const route = useRoute()
        const router = useRouter()
        const Data = reactive({
            obj: {
                path: '安全',
                title: '添加密钥',
                msg: '可添加当前组织的密钥，*******。'
            },
            ruleForm: {
                tag: '',
                authority: '',
                online: null,
                security: '11',
                username: '11',
                type: '11'
            }
        })
        onMounted(() => {
            if (route.query.id) {
                Data.obj.title = '修改密钥';
                $KeyDetail({ id: route.query.id }).then(res => {
                    Data.ruleForm = res.data.data;
                })
            }
        })
        const add = () => {
            if (route.query.id) {
                $EidtKeyFn({ id: route.query.id, ...Data.ruleForm }).then(res => {
                    if (res.data.msg == 'success') {
                        ElMessage({
                            message: '修改成功！',
                            type: 'success',
                        })
                    }
                })
            } else {
                $AddKeyFn(Data.ruleForm).then(res => {
                    if (res.data.msg == 'success') {
                        ElMessage({
                            message: '添加成功！',
                            type: 'success',
                        })
                    }
                })
            }
            router.push('/safety/keylist')
        }
        const reset = () => {
            console.log('重置')
        }


        return { ...toRefs(Data), add, reset }
    }
    // data() {
    //     return {
    //         obj: {
    //             path: '安全',
    //             title: '添加密钥',
    //             msg: '可添加当前组织的密钥，*******。'
    //         },
    //         ruleForm: {
    //             tag: '',
    //             authority: '',
    //             online: null,
    //             security: '11',
    //             username: '11',
    //             type: '11'
    //         }
    //     };
    // },

    // mounted() {
    //     if (this.$route.query.id) {
    //         this.obj.title = '修改密钥';
    //         $KeyDetail({ id: this.$route.query.id }).then(res => {
    //             this.ruleForm = res.data.data;
    //         })
    //     }
    // },

    // methods: {
    //     add() {
    //         if (this.$route.query.id) {
    //             $EidtKeyFn({ id: this.$route.query.id, ...this.ruleForm }).then(res => {
    //                 if (res.data.msg == 'success') {
    //                     this.$message.success("修改成功！");
    //                 }
    //             })
    //         } else {
    //             $AddKeyFn(this.ruleForm).then(res => {
    //                 if (res.data.msg == 'success') {
    //                     this.$message.success("添加成功！");
    //                 }
    //             })
    //         }
    //         this.$router.push('/safety/keylist')
    //     },
    //     reset() {
    //         console.log('重置')
    //      }
    // },
});
</script>

<style lang="less" scoped>
.form_box {
    background: #fff;
    padding: 30px;

    .el-form {
        width: 400px;
    }
}
</style>